<td-layout-nav logo="assets:covalent" navigationRoute="/">
  <button mat-icon-button td-menu-button tdLayoutToggle>
    <mat-icon>menu</mat-icon>
  </button>
  <div td-toolbar-content layout="row" layout-align="center center" flex>
    <span>Quickstart</span>
    <span flex></span>
    <a mat-icon-button matTooltip="Docs" href="https://teradata.github.io/covalent/" target="_blank"><mat-icon>chrome_reader_mode</mat-icon></a>
    <a mat-icon-button matTooltip="Github" href="https://github.com/teradata/covalent" target="_blank"><mat-icon svgIcon="assets:github"></mat-icon></a>
  </div>
  <div layout-gt-sm="row" tdMediaToggle="gt-xs" [mediaClasses]="['push-sm']">
    <div flex-gt-sm="60">
      <mat-card>
        <mat-card-title>Products Sales</mat-card-title>
        <mat-card-subtitle>usage stats for our products</mat-card-subtitle>
        <mat-divider></mat-divider>
        <div class="chart-height push-top push-right-sm">
          <ngx-charts-area-chart-stacked
            [scheme]="colorScheme"
            [results]="multi"
            [gradient]="gradient"
            [xAxis]="showXAxis"
            [yAxis]="showYAxis"
            [legend]="showLegend"
            [showXAxisLabel]="showXAxisLabel"
            [showYAxisLabel]="showYAxisLabel"
            [xAxisLabel]="xAxisLabel"
            [yAxisLabel]="yAxisLabel"
            [yAxisTickFormatting]="axisDigits">
          </ngx-charts-area-chart-stacked>
        </div>
      </mat-card>
      <div layout-gt-xs="row">
        <div flex-gt-xs="33">
          <mat-card>
            <mat-card-content class="text-center">
              <div class="md-headline">{{ '2341'| digits }} <mat-icon class="tc-green-500 text-sm">arrow_upward</mat-icon></div>
              <mat-icon class="icon tc-indigo-700">perm_contact_calendar</mat-icon>
              <div>
                <div class="md-subhead">Active Users</div>
                <div class="md-caption tc-grey-600">updated {{ '2016-06-17 12:59:59' | timeAgo }}</div>
              </div>
            </mat-card-content>
          </mat-card>
        </div>
        <div flex-gt-xs="33">
          <mat-card>
            <mat-card-content class="text-center">
              <div class="md-headline">{{ '72452903343' | bytes }} <mat-icon class="tc-red-500 text-sm">arrow_downward</mat-icon></div>
              <mat-icon class="icon tc-light-blue-700">sd_storage</mat-icon>
              <div>
                <div class="md-subhead">User Disk Usage</div>
                <div class="md-caption tc-grey-600">updated {{ '2016-07-18 11:02:59' | timeAgo }}</div>
              </div>
            </mat-card-content>
          </mat-card>
        </div>
        <div flex-gt-xs="33">
          <mat-card>
            <mat-card-content class="text-center">
              <div class="md-headline">{{ '324523' | digits}} <mat-icon class="tc-green-500 text-sm">arrow_upward</mat-icon></div>
              <mat-icon class="icon tc-cyan-700">receipt</mat-icon>
              <div>
                <div class="md-subhead">Pages Viewed</div>
                <div class="md-caption tc-grey-600">updated {{ '2016-07-13 09:59:59' | timeAgo }}</div>
              </div>
            </mat-card-content>
          </mat-card>
        </div>
      </div>
      <mat-card>
        <mat-card-title>Customer Activity</mat-card-title>
        <mat-card-subtitle>Recent activity from select members</mat-card-subtitle>
        <mat-divider></mat-divider>
        <mat-nav-list class="will-load item-list">
          <ng-template tdLoading="items.load">
            <ng-template let-item let-last="last" ngFor [ngForOf]="items">
              <a mat-list-item layout-align="row" [routerLink]="['../item', item.item_id]">
                <mat-icon matListAvatar> {{item.icon}} </mat-icon>
                <h3 matLine> {{item.name}} </h3>
                <p matLine> {{item.description | truncate:50 }} </p>
                <span flex></span>
                <span class="md-caption text-right" flex="20"> {{item.created | timeAgo }} </span>
              </a>
              <mat-divider *ngIf="!last" matInset></mat-divider>
            </ng-template>
          </ng-template>
        </mat-nav-list>
      </mat-card>
    </div>
    <div flex-gt-sm="40">
      <mat-card>
        <mat-card-title>Alerts</mat-card-title>
        <mat-card-subtitle>Items requiring attention</mat-card-subtitle>
        <mat-divider></mat-divider>
        <mat-list class="will-load alert-list">
          <ng-template tdLoading="alerts.load">
            <ng-template let-item let-last="last" ngFor [ngForOf]="alerts">
              <mat-list-item layout-align="row">
                <mat-icon matListAvatar class="bgc-amber-800">{{item.icon}}</mat-icon>
                <h3 matLine> {{item.description}} </h3>
                <p matLine> {{item.name}} </p>
              </mat-list-item>
              <mat-divider *ngIf="!last" matInset></mat-divider>
            </ng-template>
          </ng-template>
        </mat-list>
        <mat-divider></mat-divider>
        <mat-card-actions>
          <a mat-button color="accent" class="text-upper" [routerLink]="['/logs']">
            <span>View More</span>
          </a>
        </mat-card-actions>
      </mat-card>
      <mat-card id="dashboard-favorites-card" class="push-top">
        <mat-card-title>Favorites</mat-card-title>
        <mat-card-subtitle>Your favorite products</mat-card-subtitle>
        <mat-divider></mat-divider>
        <mat-nav-list class="will-load favorite-list">
          <ng-template tdLoading="favorites.load">
            <ng-template let-item let-last="last" ngFor [ngForOf]="products">
              <mat-list-item layout-align="row" [routerLink]="['/product']">
                <mat-icon matListAvatar>{{item.icon}}</mat-icon>
                <h3 matLine> {{item.name}} </h3>
                <p matLine> {{item.description}} </p>
              </mat-list-item>
              <mat-divider *ngIf="!last" matInset></mat-divider>
            </ng-template>
          </ng-template>
        </mat-nav-list>
        <mat-divider></mat-divider>
        <mat-card-actions>
          <a mat-button color="accent" class="text-upper" [routerLink]="['/product']">
            <span>View More</span>
          </a>
        </mat-card-actions>
      </mat-card>
    </div>
  </div>
  <td-layout-footer>
    <div layout="row" layout-align="start center">
      <span class="md-caption">Copyright &copy; 2016 Teradata. All rights reserved</span>
      <span flex></span>
      <mat-icon class="mat-icon-ux" svgIcon="assets:teradata-ux"></mat-icon>
    </div>
  </td-layout-footer>
</td-layout-nav>
